<template>
  <div class="stage-settings-data" style="border-style: groove">
    <div
        style="font-size: 18px; font-weight: bold; color: #333; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 5px; padding: 10px; text-align: center;">
      C#设定阶段数据
    </div>
    <el-table :data="tableData" border style="width: 100%" height="300" class="custom-table">
      <el-table-column prop="stepNo" label="阶段序号" width="60"></el-table-column>
      <el-table-column prop="stepName" label="阶段名称" width="100"></el-table-column>
      <el-table-column prop="stepTime" label="本阶段时长 (min)" width="100">
        <template #default="{ row }">
          <el-input v-model="row.stepTime" type="number"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="stepStempu" label="设定温度上 (°C)" width="100">
        <template #default="{ row }">
          <el-input v-model="row.stepStempu" type="number"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="stepStempm" label="设定温度中 (°C)" width="100">
        <template #default="{ row }">
          <el-input v-model="row.stepStempm" type="number"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="stepStempd" label="设定温度下 (°C)" width="100">
        <template #default="{ row }">
          <el-input v-model="row.stepStempd" type="number"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="stepCarrier" label="设定载气量 (L/min)" width="100">
        <template #default="{ row }">
          <el-input v-model="row.stepCarrier" type="number"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="stepHydrogen" label="设定氢气量 (L/min)" width="140">
        <template #default="{ row }">
          <el-input v-model="row.stepHydrogen" type="number"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="stepCarbons" label="设定碳源量 (L/min)" width="130">
        <template #default="{ row }">
          <el-input v-model="row.stepCarbons" type="number"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="stepWater" label="设定水流量 (g/min)">
        <template #default="{ row }">
          <el-input v-model="row.stepWater" type="number"></el-input>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import emitter from "@/utils/eventBus.ts";

const {proxy}: any = getCurrentInstance();

    const tableData = ref<[]>([
      // 其他阶段数据...
    ]);
    // 回填设置数据
    onMounted(() => {
      emitter.on('stepTableDataCline', (data) => {
        tableData.value = [];
        tableData.value = data;
        console.log('回填设置数据:', tableData.value)
      });

      // 等待开始实验按钮
      emitter.on('getStepTableListCline', () => {
        emitter.emit('getNowStepTableListCline', tableData.value)
      })
    })

    // 组件卸载时清理事件监听，防止内存泄漏
    onUnmounted(() => {
      emitter.off('stepTableDataCline');

      emitter.off('getStepTableListCline')
    });

</script>

<style scoped>
.stage-settings-data {
  width: 99%;
}

::v-deep.el-table th {
  background-color: #f0f0f0; /* 表头背景色 */
  color: #333; /* 表头文字颜色 */
  font-weight: bold; /* 表头文字加粗 */
}

.custom-table {
  overflow: auto; /* 允许滚动 */
}

.custom-table::-webkit-scrollbar {
  width: 6px; /* 滚动条宽度 */
}

.custom-table::-webkit-scrollbar-thumb {
  background-color: #ccc; /* 滚动条滑块颜色 */
  border-radius: 3px; /* 滚动条滑块圆角 */
}

.custom-table::-webkit-scrollbar-track {
  background-color: #f0f0f0; /* 滚动条轨道颜色 */
}

::v-deep.el-table th {
  background-color: #f0f0f0; /* 表头背景色 */
  color: #333; /* 表头文字颜色 */
  padding: 0px 0px; /* 减小上下内边距，让表头看起来更紧凑 */
  line-height: 1.5; /* 调整行高为 1.5 倍字体大小，可根据实际效果微调 */
}
</style>
